<!--{{$st('wp_Reservation_Form_Transfer')}}-->
<template>
    <div class="reassignment">
        <div class="img">
            <van-icon
                :name="img"
                size="60" />
        </div>
        <div class="info">
            <div class="title">{{'维检工单转派'}}</div>
            <div class="order-info">
                <div>{{'维检工单号：'}}：{{ maintainworkorderid }}</div>
                <!-- <div>{{$st('wp_Company_Name')}}：{{ company }}</div> -->
                <div>{{'维检负责人：'}}：{{ administratoralias ? `${administrator}(${administratoralias})` : administrator }}</div>
            </div>
        </div>
        <van-cell
            class="action"
            @click=" selectUsershow = !isConfirm"
            is-link
            :value="selectedUser.label">
            <template #title>
                <span class="red">*</span>
                <span class="customer">{{$st('wp_Transfer_to')}}</span>
            </template>
        </van-cell>
        <div class="button-group">
            <van-button
                v-if="!isConfirm"
                :disabled="buttonDisabled"
                class="confirm"
                round
                type="primary"
                @click="confirm">{{$st('wp_Confirm_transfer')}}</van-button>
            <van-button
                v-if="isConfirm"
                class="confirm"
                round
                type="primary"
                @click="goto('maitenancecheckorderdetail', { maintainworkorderid: maintainworkorderid})">{{'维检详情'}}</van-button>
            <van-button
                v-if="isConfirm"
                class="confirm"
                round
                @click="goto('maintenancelist')">{{'返回维检工单列表'}}</van-button>
        </div>
        <popup-search-index-bar
            v-model="selectUsershow"
            :data="users"
            displayField = "label"
            @selectedItem="userSelected"
        />
    </div>
</template>
<script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import PopupSearchIndexBar from '@/components/_common/PopupSearchIndexBar.vue';
import planeImg from '@/assets/icon_60_plane@2x.png';
import dispatchSucceedImg from '@/assets/icon_60_success@2x.png';

import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup';
import Cookies from 'js-cookie';
// import { getRepairDataSetup } from '@/setup/repair/RepairOptionsSetup';
import MaintaincheckorderDetailSetup from '@/setup/maintaincheckorder/MaintaincheckorderDetailSetup';
export default {
    name: 'Reassignment',
    components: {
        PopupSearchIndexBar
    },
    props: {
        maintainworkorderid: String,
        // company: String,
        administrator: String,
        administratoralias: String
    },
    setup (props) {
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();
        // const { postrepairTransfer } = getRepairDataSetup();
        const { postmaintaincheckTransfer } = MaintaincheckorderDetailSetup();

        const img = ref(planeImg);
        const buttonDisabled = ref(true);
        const isConfirm = ref(false);
        const selectUsershow = ref(false);
        const selectedUser = ref('');
        const confirm = () => {
            const params = {
                administrator: selectedUser.value.value,
                maintainworkorderid: props.maintainworkorderid,
                // repairid: props.repairId,
                username: Cookies.get('username')
            };
            postmaintaincheckTransfer(params, () => {
                buttonDisabled.value = false;
                isConfirm.value = true;
                img.value = dispatchSucceedImg;
            });
        };
        const userSelected = (item) => {
            buttonDisabled.value = false;
            selectedUser.value = item;
        };

        const users = reactive([]);

        const router = useRouter();
        const goto = (page, params) => {
            router.push({
                replace: true,
                name: page,
                // params,
                params: {
                    type: 'maintaincecheckorder'
                    // company: state.repairData.company
                }
            });
        };
        getAllMaintenanceTeamMembers().then(response => {
            response.value.map((item) => {
                users.push({ value: item.account, label: item.alias ? `${item.account}(${item.alias})` : item.account });
            });
        });

        return {
            img,
            buttonDisabled,
            isConfirm,
            selectUsershow,
            selectedUser,
            users,
            userSelected,
            show: ref(false),
            confirm,
            goto,
            postmaintaincheckTransfer
        };
    }
};
</script>
<style lang="scss" scoped>
.reassignment{
    .img{
        margin: 45px auto 15px auto;
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .info{
        text-align: center;
        .title{
            font-size: 15px;
            margin-bottom: 10px;
        }
        .order-info{
            font-size: 13px;
            color: rgba(0,0,0,0.60);
            div{
                margin-bottom: 5px;
            }
        }
    }
    .action{
        height: 44px;
        margin-top: 23px;
        font-size: 17px;
    }

    .red{
        color: red;
    }
    .customer{
        font-size: 17px;
        font-weight: 400;
    }
    .button-group{
        text-align: center;
        margin-top: 60px;
    }
    .confirm{
        width: 180px;
        height: 35px;
        margin: 0 auto 15px auto;
        display: block;
        font-size: 17px;
    }
}
</style>
